<template>
	<div class="wrapper" align="center">
		<div class="section page-header header-filter" :style="headerStyle">
			<div class="container">
				<div class="md-layout">
					<div
						class="md-layout-item md-size-50 md-small-size-66 md-xsmall-size-100 md-medium-size-40 mx-auto">
						<login-card header-color="green">
							<h3 slot="title" class="card-title dl" >账号登陆</h3>
							
							<md-field md-clearable class="md-form-group " slot="inputs" >
								<md-icon><svg t="1638164368367" class="icon" viewBox="0 0 1030 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2308" width="200" height="200"><path d="M508.028519 495.362853l-0.253963 0.977251c0.158473 0 0.316946-0.004063 0.47542-0.004063l0-0.969125C508.175818 495.366917 508.102677 495.362853 508.028519 495.362853z" p-id="2309"></path><path d="M1014.421514 958.802499c-10.955984-220.238134-123.422182-405.60099-321.286134-478.03645 51.744548-49.010886 84.024321-118.362213 84.024321-195.256256 0-148.514788-120.394937-268.909725-268.908709-268.909725-148.514788 0-268.909725 120.394937-268.909725 268.909725 0 76.895059 32.281804 146.24537 84.024321 195.256256C125.503666 553.201509 13.033405 738.56538 2.077421 958.802499c-0.098538 0.937633-0.153394 1.884409-0.153394 2.84947 0 14.849752 12.0399 26.890668 26.890668 26.890668 0.134093 0 0.264122-0.018285 0.397199-0.021333 0.133077 0.003048 0.263106 0.021333 0.397199 0.021333l957.28075 0c0.134093 0 0.26209-0.018285 0.396183-0.021333 0.134093 0.003048 0.263106 0.021333 0.397199 0.021333 14.852799 0 26.891684-12.040916 26.891684-26.890668C1014.574908 960.687924 1014.519036 959.740132 1014.421514 958.802499zM376.653218 520.052166c3.904942-1.101186 7.836297-2.137357 11.780857-3.143052l-0.003048-0.01219c11.112425-3.302541 19.223003-13.58095 19.223003-25.766118 0-9.005545-4.442329-16.956633-11.238391-21.837811-1.004679-0.721256-2.052025-1.382577-3.15321-1.96263-2.612776-1.655842-5.191013-3.359429-7.725569-5.122951-55.848598-38.858442-92.412226-103.504335-92.412226-176.698638 0-118.812237 96.316153-215.128389 215.128389-215.128389 118.811221 0 215.127374 96.315137 215.127374 215.128389 0 73.194303-36.562612 137.83918-92.412226 176.698638-2.534555 1.763522-5.112793 3.467109-7.725569 5.122951-1.10017 0.580053-2.148531 1.241373-3.15321 1.96263-6.796062 4.881178-11.238391 12.832266-11.238391 21.837811 0 12.186183 8.110577 22.463577 19.223003 25.766118l-0.004063 0.01219c3.944561 1.004679 7.875915 2.041866 11.780857 3.143052 187.504275 52.856908 300.1452 215.83644 318.944591 414.70812L57.707611 934.760285C76.507002 735.888605 189.148943 572.909074 376.653218 520.052166z" p-id="2310"></path></svg></md-icon>
								
								<label>用户名...</label>
								<md-input v-model="name" ></md-input>
							</md-field>

							<md-field class="md-form-group" slot="inputs">
								<md-icon><svg t="1638164515147" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3119" width="200" height="200"><path d="M288 384v-74.666667c0-123.722667 100.266667-224 224-224s224 100.224 224 224v74.666667h10.677333C811.445333 384 864 436.597333 864 501.333333v320c0 64.821333-52.469333 117.333333-117.322667 117.333334H277.333333C212.554667 938.666667 160 886.069333 160 821.333333V501.333333c0-64.821333 52.469333-117.333333 117.322667-117.333333H288z m64 0h320v-74.666667c0-88.426667-71.605333-160-160-160-88.384 0-160 71.626667-160 160v74.666667zM224 501.333333v320c0 29.397333 23.914667 53.333333 53.322667 53.333334H746.666667A53.269333 53.269333 0 0 0 800 821.333333V501.333333c0-29.397333-23.914667-53.333333-53.322667-53.333333H277.333333A53.269333 53.269333 0 0 0 224 501.333333z" p-id="3120"></path></svg></md-icon>
								<label>密 码...</label>
								<md-input v-model="password" type="password"></md-input>
							</md-field>
							<md-button type="primary" @click=alt() slot="footer" class="md-simple md-success md-lg test">
								登陆
							</md-button>
							<md-button @click=register() slot="footer" class="md-simple md-danger md-lg">
								注册
							</md-button>
						</login-card>
						
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		LoginCard
	} from "@/components";

	export default {
		components: {
			LoginCard,
		},
		bodyClass: "login-page",
		data() {
			return {
				name: null,
				// email: null,
				password: null,
				
			};
		},
		props: {
			header: {
				type: String,
				default: require("@/assets/img/profile_city.jpg")
			}
		},
		computed: {
			headerStyle() {
				return {
					backgroundImage: `url(${this.header})`
				};
			}
		},
		methods:{
			register() {
			  //1.删除session中的数据
			  window.sessionStorage.clear()
			  //2.用户访问登录页面
			  this.$router.push('/register')
			}
		}
	};
</script>

<style lang="scss">
	 .md-field:last-child {
	    margin-bottom: 40px;
	  }
	 .md-checkbox {
	     display: flex;
	   }
	 
	   
	   table{
	     width: 100%;
	     table-layout: fixed;
	   	 
	     th {
	       text-align: center;
	     }
	   }
	    
</style>
